<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="./css/list.css">
    <title>Search</title>
    <style>
        .no-result {
            border: 1px dashed rgba(0, 0, 0, 0.253);
            padding: 16px 0;
            font-size: 20px;
            color: #444;
            text-align: center;
        }

        .key {
            /* color: #000; */
            background-color: rgba(199, 199, 199, 0.644) !important;
        }

        @media (max-width:420px) {
            main{
                padding: 10px;
            }
            .h1{
                padding: 10px !important;
            }
        }
    </style>
</head>

<body>
    <header style="background-image: url(./img/b.jpg);">
        <nav class="nav-top top-show">
            <div id="logo">
                <a href="./index.html">
                    暗天使
                </a>
            </div>
            <div class="menu">
                <i class="iconfont icon-menu"></i>
            </div>
            <div class="nav">
                <a href="index.html" class="item">首页</a>
                <a href="./list.html" class="item">文章</a>
                <a href="./archives.html" class="item">足迹</a>
                <a href="./links.html" class="item">友链</a>
                <a href="about.html" class="item">关于</a>
            </div>
            <div class="search">
                <a href="#">
                    <i class="iconfont icon-31sousuo"></i>
                    <!-- <img src="./img/icon/搜索_填充.png" alt=""> -->
                </a>
                <div class="search-box ">
                    <div class="quit">
                        <a href="#">
                            关闭
                        </a>
                    </div>
                    <form action="./search.html">
                        <input required type="text" name="q" id="" placeholder="想要找点什么呢？">
                        <input type="submit" value="搜索">
                    </form>
                </div>
            </div>
        </nav>
        <div class="container-flex">
            <div class="box">
                <div class="h1">关于“<span id="query"></span>”的搜索结果</div>
            </div>
        </div>
    </header>
    <main class="container">
        <div class="content">
            <div class="no-result">
                没有找到任何东西！
            </div>
            <div class="list">
                <div class="list-item">
                    <div class="profile">
                        <a href="#">
                            <img src="./img/aaa.jpg" alt="">
                        </a>
                    </div>
                    <div class="text">
                        <div class="title">
                            <a href="#">
                                title <span class="key">title</span> 2233
                            </a>
                        </div>
                        <div class="desc">
                            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum praesentium incidunt,
                            neque
                            quisquam assumenda animi au<span class="key">adipisicing</span>tem nostrum qua
                        </div>
                    </div>
                    <hr>
                </div>
                <div class="list-item">
                    <div class="profile">
                        <a href="#">
                            <img src="./img/aaa.jpg" alt="">
                        </a>
                    </div>
                    <div class="text">
                        <div class="title">
                            <a href="#">
                                title title 2233
                            </a>
                        </div>
                        <div class="desc">
                            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum praesentium incidunt,
                            neque
                            quisquam assumenda animi autem nostrum qua
                        </div>
                    </div>
                    <hr>
                </div>
                <div class="list-item">
                    <div class="profile">
                        <a href="#">
                            <img src="./img/bg1.jpg" alt="">
                        </a>
                    </div>
                    <div class="text">
                        <div class="title">
                            <a href="#">
                                title title 2233
                            </a>
                        </div>
                        <div class="desc">
                            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum praesentium incidunt,
                            neque
                            quisquam assumenda animi autem nostrum qua
                        </div>
                    </div>
                    <hr>
                </div>
                <div class="list-item">
                    <div class="profile">
                        <a href="#">
                            <img src="./img/aaa.jpg" alt="">
                        </a>
                    </div>
                    <div class="text">
                        <div class="title">
                            <a href="#">
                                title title 2233
                            </a>
                        </div>
                        <div class="desc">
                            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum praesentium incidunt,
                            neque
                            quisquam assumenda animi autem nostrum qua
                        </div>
                    </div>
                    <hr>
                </div>


            </div>
        </div>
        <footer>
            footer Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero, distinctio commodi? Voluptatem
            asperiores dicta, excepturi corporis r molestiae iste veniam tempore sint odio,
            <br>
            corrupti ipsa. Harum, inventore.
        </footer>

        <div id="cd-top">
            <img src="./img/f.png" alt="">
        </div>
    </main>

    <script src="js/main.js"></script>
    <script>
        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) { return pair[1]; }
            }
            return '';
        }

        let query = document.querySelector('#query')
        q = decodeURI(getQueryVariable('q'))
        query.innerHTML = q

    </script>
</body>

</html>